<template>
  <a-modal
    :maskClosable="false"
    :keyboard="false"
    centered
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="serialNum" slot-scope="text,record,index">
          {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
        </template>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-modal>
</template>

<script>

  import {YcListMixin} from '@/mixins/YcListMixin'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "SelectRoleModal",
    mixins: [YcListMixin],
    data() {
      return {
        title: this.$t('m.bpm.other.add_role'),
        visible: false,
        // 表头
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: "center",
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.system.role.entity.roleName'),
            align: "center",
            dataIndex: 'roleName'
          }
        ],
        url: {
          list: YchConstant.PREFIX_SYSTEM + "/role/list",
        }
      }
    },
    methods: {
      handleCancel() {
        this.visible = false;
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
      handleOk() {
        this.$emit("selectFinished", this.selectedRowKeys, this.selectionRows);
        this.handleCancel();
      }
    }
  }
</script>
